<template>
  <view class="container">
    <globalheader ref="globalheaderRef" @value-changed="showCityPicker"/>
    
    <!-- 返回按钮 -->
    <!-- <view class="back-bar">
      <view class="back-btn" @click="goBack">
        <text class="back-arrow">←</text>
        <text class="back-text">返回</text>
      </view>
    </view> -->
    
    <!-- 医院列表 -->
    <view class="hospital-list">
      <view 
        class="hospital-card" 
        v-for="hospital in hospitals" 
        :key="hospital.id"
        @click="goToHospital(hospital.id)"
      >
        <image :src="imgurl+hospital.imgUrl" class="hospital-image" mode="aspectFill"></image>
        <view class="hospital-info">
          <view class="hospital-name">{{ hospital.name }}</view>
          <view class="contact-info">
			<view class="icon-dianhua-color">
              <text class="iconfont icon-dianhua" style="font-size: 50rpx;"></text>
			</view>
            <text class="phone-number">{{ hospital.telephone }}</text>
          </view>
          <view class="address-info">
			<view class="icon-dingwei-color">
				<text class="iconfont icon-dingwei" style="font-size: 50rpx;"></text>
			</view>
            <text class="address-text">{{ hospital.address }}</text>
          </view>
        </view>
        <view class="rating">
		  <view class="icon-shoucang-color">
		     <text class="iconfont icon-shoucang" style="font-size: 32rpx;">5.0</text>
		  </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getHospitalByBiseaseType} from '@/api/hospital.js'
import config from '../../config';
export default {
  data() {
    return {
	  imgurl: config.staticUrl,
	  biseaseType:null,
      hospitals: [
    //     {
    //       id: 1,
    //       name: '北京协和医院',
    //       phone: '010-12345678',
    //       address: '北京市东城区帅府园一号',
    //       rating: '4.8',
    //       image: 'https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&q=80&w=300',
		  // business_hours:'营业时间：周一至周日 8:00-17:00',
		  // introduction:''
    //     },
    //     {
    //       id: 2,
    //       name: '北京大学第一医院',
    //       phone: '010-87654321',
    //       address: '北京市西城区西什库大街8号',
    //       rating: '4.7',
    //       image: 'https://images.unsplash.com/photo-1586773860418-d37222d8fce3?auto=format&fit=crop&q=80&w=300',
		  // business_hours:'营业时间：周一至周日 8:00-17:00',
		  // introduction:''
    //     }
      ]
    }
  },
  onLoad(option){
	  var that = this;
	  // 获取组件实例
	  const globalheaderRef = this.$refs.globalheaderRef;
	  // console.log("option.currentCityId",option.currentCityId)
	  // console.log("option.currentCity",option.currentCity)
	  this.biseaseType = option.id
	  // console.log("option.biseaseType",this.biseaseType)
	  let cityid = option.currentCityId
	  globalheaderRef.currentCity = option.currentCity
	  // 根据疾病获取医院列表
	  getHospitalByBiseaseType(this.biseaseType,cityid).then(res => {
  		// console.log("BiseaseType",res)
  		// this.$modal.msgSuccess("类型成功");
  		if (res.code == 200) {
  			that.hospitals = res.data;
  		}
  	});
  },
  methods: {
    // goBack() {
    //   uni.navigateBack()
    // },
    goToHospital(id) {
      uni.navigateTo({
        url: `/pages/hospital/detail?id=${id}&biseaseType=${this.biseaseType}`
      })
    },
	showCityPicker(value) {
	  console.log("城市id新值",value)
	  // 根据疾病获取医院列表
	    getHospitalByBiseaseType(this.biseaseType,value).then(res => {
	  	console.log("BiseaseType",res)
	  	// this.$modal.msgSuccess("类型成功");
	  	if (res.code == 200) {
	  		this.hospitals = res.data;
	  	}
	  });
	},
  }
}
</script>

<style>
page {
  background: #F5F7F9;
}

.container {
  min-height: 100vh;
}

/* 顶部促销banner样式 */
.promo-banner {
  background: linear-gradient(90deg, #4B7BFE 0%, #8C54FF 100%);
  padding: 24rpx 32rpx;
}

.promo-content {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.promo-icon {
  width: 32rpx;
  height: 32rpx;
}

.promo-text {
  color: #FFFFFF;
  font-size: 28rpx;
  font-weight: 400;
}

/* 头部区域样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  background: #FFFFFF;
}

.location-box {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.location-icon {
  width: 32rpx;
  height: 32rpx;
}

.location-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
}

.notification-box {
  position: relative;
}

.notification-icon {
  width: 40rpx;
  height: 40rpx;
}

.notification-dot {
  position: absolute;
  top: -4rpx;
  right: -4rpx;
  width: 16rpx;
  height: 16rpx;
  background: #FF4141;
  border-radius: 50%;
}

/* 返回按钮样式 */
.back-bar {
  padding: 20rpx 32rpx;
  background: #FFFFFF;
  border-bottom: 2rpx solid #EEEEEE;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.back-arrow {
  color: #666666;
  font-size: 32rpx;
}

.back-text {
  color: #666666;
  font-size: 28rpx;
}

/* 医院列表样式 */
.hospital-list {
  padding: 24rpx;
}

.hospital-card {
  background: #FFFFFF;
  border-radius: 12rpx;
  padding: 24rpx;
  display: flex;
  margin-bottom: 24rpx;
  position: relative;
}

.hospital-image {
  width: 160rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 24rpx;
}

.hospital-info {
  flex: 1;
}

.hospital-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 16rpx;
}

.contact-info,
.address-info {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 12rpx;
}

.info-icon {
  width: 28rpx;
  height: 28rpx;
}

.phone-number,
.address-text {
  font-size: 26rpx;
  color: #666666;
}

.rating {
  position: absolute;
  top: 24rpx;
  right: 24rpx;
  display: flex;
  align-items: center;
  gap: 4rpx;
}

.star-icon {
  width: 28rpx;
  height: 28rpx;
}

.rating-score {
  color: #EAB308;
  font-size: 28rpx;
  font-weight: 500;
}

.icon-shoucang-color {
  color: #EAB308;
}

.icon-dianhua-color {
  color: #3b82f6;
}

.icon-dingwei-color {
  color: #3b82f6;
}
</style>